簡介:作為一名開發(fā)人員,在WEB前端項(xiàng)目開發(fā)中,重復(fù)而枯燥的工作太多,Grunt自動(dòng)化的項(xiàng)目構(gòu)建工具,幫你解決這些問題,對重復(fù)執(zhí)行的任務(wù)像壓縮,合并,編譯,單元測試及代碼檢查等, 通過配置Grunt自動(dòng)化工具,可以減輕您的勞動(dòng),簡化您的工作。
第1章 課程介紹
介紹什么是前端集成解決方案,目前流行的是哪幾種,主流方案即yeoman,bower,grunt的組合。而grunt只能算是build Tools, 構(gòu)成競爭的幾種主流的build Tools 包括 Ant, Buildy, Gmake, Jammit, Jasy, Rake, Sprockets,Gulp。 通過學(xué)習(xí)本課程力爭讓大家學(xué)習(xí)到現(xiàn)代web項(xiàng)目的思想,進(jìn)而在自己的項(xiàng)目中整合進(jìn)集成解決方案。
第2章 準(zhǔn)備工作
簡單介紹NodeJS環(huán)境及其安裝,Grunt基于NodeJS構(gòu)建;Yeoman, Bower, Grunt的安裝方法,及安裝成功與否驗(yàn)證。
第3章 Yeoman實(shí)踐
引導(dǎo)大家閱讀Yeoman生成的WebApp代碼, 詳解各個(gè)文件的作用,穿插講解editconfig,以及代碼規(guī)范。
第4章 Bower實(shí)踐
演示如何使用Bower安裝Jquery 和 bootstrap相關(guān)的js和css文件, 詳解Bower的配置文件。
第5章 Grunt實(shí)踐
對于已有的Grunt項(xiàng)目我們?nèi)绾螌⑵渑芷饋恚灰延械奈词褂肎runt構(gòu)建的項(xiàng)目,如何將Grunt強(qiáng)大的能力引入其中,講講npm的核心package.json,如何安裝Grunt的插件,如何一步到位編寫Grunt的配置文件及配置文件各項(xiàng)詳解。
- 視頻: 5-1 Grunt的Task,Target和Options (17:06)
- 視頻: 5-2 從無到有構(gòu)建Grunt項(xiàng)目 (08:06)
- 視頻: 5-3 初識(shí)Grunt Files處理方式 (23:39)
- 視頻: 5-4 剖析Grunt Tasks - grunt serve(一) (10:33)
- 視頻: 5-5 剖析Grunt Tasks - grunt serve(二) (18:37)
- 視頻: 5-6 剖析Grunt Tasks - grunt test (16:35)
- 視頻: 5-7 剖析Grunt Tasks - grunt build(一) (18:56)
- 視頻: 5-8 剖析Grunt Tasks - grunt build(二) (11:22)
- 視頻: 5-9 剖析Grunt Tasks - grunt build(三) (09:14)
第6章 Grunt - plugins
本章除了能愉快地掌握怎樣為grunt編寫,貢獻(xiàn)插件。我們還將一窺開源生態(tài),學(xué)習(xí)如何通過github快速構(gòu)建自己的項(xiàng)目,并搭建主頁推介出去。最最重要的,這一節(jié)已請佛祖開光,大家快來一窺究竟吧。
第7章 擴(kuò)展知識(shí)介紹
相同的任務(wù)使用 Gulp 和 npm 如何實(shí)現(xiàn),比較三者優(yōu)劣。
第8章 課程總結(jié)
通過本課程我們切實(shí)了解了現(xiàn)代Web的開發(fā)方式以及最前沿的集成解決方案。后續(xù)希望能跟大家聊一聊那些讓我們的開發(fā)事半功倍的前端工具。